<!DOCTYPE html>
<html lang="en">

<head>

  <title>用户开户</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href="css/sb-admin-2.min.css" rel="stylesheet">

  <!--1.引入 bootstrap 框架全局样式 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
  <!--2.引入 Layer 弹窗的样式 -->
  <link rel="stylesheet" href="layer/layer/theme/default/layer.css"/>
  <!--3.引入 jquery 框架类库 -->

  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/jquery-cookie/jquery.cookie.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  <script src="js/sb-admin-2.min.js"></script>

  <!--4.引入 bootstrap 框架类库 -->
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!--5.引入 Layer 弹窗的类库 -->
  <script src="layer/layer/layer.js"></script>
  <!--6.引入 angularJS 框架类库 -->
  <script src="angularjs/angular.min.js"></script>
  <!--7.引入 angularJS 框架分页的类库 -->
  <script src="angularjs/pagination.js"></script>
  <!--8.引入 Layer 弹窗的类库 -->
  <script src="layer/layer/layer.js"></script>
  <!--9.定义自己写的 javascript 代码： -->
  <script>
      //创建模块
      var app = angular.module("MyApp2", []);
      //创建控制器
      app.controller("openAccountController", function ($scope, $http) {
          $scope.user = {
              userid:'',
              username:'',
              usernumberid:'',
              userpaypwd:''
          };
          //验证密码
          $scope.checking = function() {
              if ($scope.repeatpwd == $scope.user.userpaypwd) {
              } else {
                  layer.tips("两次输入的密码不一致!", "#exampleInputPassword", {tips: [3, "red"], time: 1500});
                  $scope.repeatpwd = null ;
              }
          };
          //同意用户协议
          $scope.agree = function() {
              if ($("#clause").prop("checked")) {
                  $("#openAccount").attr("disabled", false).css("pointer-events", "auto");
              } else {
                  $("#openAccount").attr("disabled", true).css("pointer-events", "none");
              }
          };

          $scope.submit = function () {
              if ($scope.user.usernumberid.length == 18 && $scope.bankCard.length >= 16) {
                  layer.msg("开始注册");
                  $scope.user.userid = $.cookie("stock_user_id");
                  $http.post("/users/user/openAccount?bankCard=" + $scope.bankCard, $scope.user).success(function (data) {
                      if (data.code == -1) {
                          layer.msg(data.msg);
                      } else if (data.code == 0) {
                          layer.msg(data.msg , {icon: 6});
                          $.cookie("stock_user_role","1",{path:'/'});
                          setTimeout(function () {location.href = "index.html";}, 800);
                      }
                  });
              } else {
                  layer.msg("输入内容有错!");
              }
          };
      });

  </script>

  <style>
    .container {
      padding-top: 50px;
    }
    form.user .form-control-user {
      padding: 0 15px;
      font-size: 14px;
    }
    form.user .btn-user {
      font-size: 14px;
    }
    .btn-br20px {
      border-radius: 20px;
    }
  </style>
</head>

<div class="modal fade" id="servicePaperModal" tabindex="-1" role="dialog" aria-labelledby="servicePaperModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="color: deepskyblue;font-weight: bold">服务协议</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
      </div>
      <div class="modal-body">
        关于本系统的最终解释权归此系统的开发者所有
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<body class="bg-gradient-primary" ng-app="MyApp2" ng-controller="openAccountController">
  <div class="container">
    <div class="card o-hidden border-0 shadow-lg my-5">
      <div class="card-body p-0">
        <!-- Nested Row within Card Body -->
        <div class="row">
          <div class="col-lg-5 d-none d-lg-block "><img src="img/account.jpg" style="height: 500px;width: 100%;"></div>
          <div class="col-lg-7">
            <div class="p-5">
              <div class="text-center">
                <h1 class="h4 text-gray-900 mb-4">用户开户</h1>
              </div>
              <form class="user" name="userForm" ng-submit="submit()" >
                  <div class="form-group">
                      <input type="text" oninput="this.value=this.value.replace(/\s+/g,'')" class="form-control form-control-user" id="exampleFirstName" ng-model="user.username" placeholder="真实姓名" required>
                  </div>

                <div class="form-group">
                  <input type="text" minlength="18" maxlength="18" oninput="this.value=value.replace(/[^\w\.\/]/ig,'')" class="form-control form-control-user" id="exampleNumberId" ng-model="user.usernumberid" placeholder="身份证号" required>
                </div>
                <div class="form-group row">
                  <div class="col-sm-6 mb-3 mb-sm-0">
                    <input type="password" maxlength="12" oninput="this.value=this.value.replace(/\s+/g,'')" class="form-control form-control-user" id="exampleInputPassword" ng-model="user.userpaypwd"  placeholder="设置支付密码 (最长12位)" required>
                  </div>
                  <div class="col-sm-6">
                    <input ng-blur="checking()"  oninput="this.value=this.value.replace(/\s+/g,'')" type="password" class="form-control form-control-user" id="exampleRepeatPassword" ng-model="repeatpwd" placeholder="确认支付密码" required>
                  </div>
                </div>
                <div class="form-group">
                  <input type="text"  minlength="19" maxlength="19"   oninput="this.value=value.replace(/[^\d]/g,'')" class="form-control form-control-user" id="exampleInputBankCard" ng-model="bankCard"  placeholder="银行卡号" required>
                </div>

                <div class="form-group">
                  <label for="clause" ></label>
                  <input name="agree" type="checkbox"  id="clause" ng-click="agree()" ng-required="expression" />
                  <span>阅读并同意<a href="javascript:void(0);" id="acceptServicePaper" title="阅读并同意">服务协议</a></span>
                </div>
                <button type="submit" class="btn btn-primary btn-user btn-block" id="openAccount" disabled="userForm.$invalid" >确认开户</button>
              </form>
              <hr>
              <div class="text-center">
                <a style="float: left" href="login.html">先去登录</a><a style="float: right"  href="register.html">注册账号</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="text-right text-gray-600">金证证券在线交易中心</div>
      </div>
    </div>
  </div>

  <script>
      $(function () {
          $("#openAccount").attr("disabled", true).css("pointer-events","none");
          $("#acceptServicePaper").click(function () {
              $("#servicePaperModal").modal("show");
          })
      });
  </script>

</body>
</html>
